<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <title>Parallax Template -Materialize</title>
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="css/materialize.css">
  <style>
    nav .brand-logo, nav ul a{
      color: #444;
    }
    nav ul a:hover{
      background: rgba(0,0,0,0.1);
    }
    .button-collapse{
      color: #26a69a;
    }
  </style>
</head>
<body>
<nav class="white">
  <div class="container nav-wrapper">
    <a class="brand-logo" href="javascript:;">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li>
        <a href="javascript:void(0);">Navbar Link</a>
      </li>
    </ul>
    <ul id="nav-mobile" class="side-nav">
      <li>
        <a href="javascript:void(0);">Navbar Link</a>
      </li>
    </ul>
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav>
<div class="drag-target" data-sidenav="nav-mobile">ddd</div>

</body>
</html>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script>
  console.log($)
  $(function(){
    $(".side-nav").sidenav();
  })
</script>